<template>
    <div id="team">
        <van-tabs
            v-model="active"
            swipeable
            sticky
            title-active-color="#F24B3A"
            @change="tabChange"
        >
            <van-tab
                v-for="(item, index) in title"
                :key="index"
                :title="item.name + '(' + item.num + ')'"
            >
                <!-- 列表 -->
                <van-pull-refresh
                    v-if="!loadData"
                    v-model="refreshing"
                    @refresh="onRefresh"
                    success-text="刷新成功"
                >
                    <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="loadMore"
                        class="list"
                        :offset="100"
                        :immediate-check="false"
                        v-if="list.length !== 0"
                    >
                        <div
                            v-for="(item, index) in list"
                            :key="index"
                            class="list-item"
                        >
                            <div class="avatar">
                                <img
                                    src="https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                                    alt=""
                                />
                            </div>
                            <div class="middle">
                                <div class="top">
                                    <div class="name omit">
                                        {{ item.fundOperationsTypeName }}
                                    </div>
                                    <div class="name omit">(徐银行)</div>
                                    <!-- 用户 -->
                                    <!-- <div class="flag grey">未领取</div> -->
                                    <!-- <div class="flag blue">已领取</div> -->
                                    <!-- <div class="flag orange">已发货</div> -->
                                    <!-- <div class="flag red">已签收</div> -->
                                    <!-- 团员/团长 -->
                                    <div class="flag orange">下级贡献</div>
                                </div>
                                <div class="middle-view">
                                    <div class="add">
                                        今日新增0人 本月新增0人
                                    </div>
                                    <div class="icon">
                                        <img
                                            src="../../../assets/img/daijika@1x.svg"
                                            alt=""
                                            class="wechat"
                                        />
                                        <img
                                            src="../../../assets/img/daijika@1x.svg"
                                            alt=""
                                            class="call"
                                        />
                                        <img
                                            src="../../../assets/img/daijika@1x.svg"
                                            alt=""
                                            class="arrow"
                                        />
                                    </div>
                                </div>
                                <div class="time">注册时间: 2024-07-17</div>
                            </div>
                        </div>
                    </van-list>
                    <van-empty v-else description="暂无内容" />
                </van-pull-refresh>
                <div v-else class="load">
                    <van-loading color="#F53137" />
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    export default {
        props: [], // 父辈向子辈传参
        name: 'team',
        components: { // 组件的引用

        },
        data() {
            return {
                active: 0,
                title: [
                    {
                        name: '用户',
                        num: 13
                    },
                    {
                        name: '团员',
                        num: 4
                    },
                    {
                        name: '团长',
                        num: 2
                    },
                ],
                size: 10,
                current: 1,
                loading: false,
                finished: false,
                refreshing: false,
                list: [],
                summary: {},
                loadData: true,
            }
        },
        methods: {
            getList() {
                const { size, current } = this;
                this.$toast.clear()

                let params = {
                    size,
                    current,
                };
                // 删除空字符串参数
                for (let key in params) {
                    if (params[key] === "" || params[key] === null) {
                        delete params[key];
                    }
                }
                console.log("携带参数", params);
                console.log("active", this.active);

                console.log("refreshing", this.refreshing, this.finished);
                this.$api.app.walletListApi(params).then((res) => {
                    console.log("获取列表结果", res);
                    this.loadData = false
                    if (this.refreshing === true) {
                        // 下拉刷新
                        this.refreshing = false;
                        this.list = res.data.records
                        // this.loading = false;
                        if (this.list.length == res.data.total || res.data.records.length === 0) {
                            this.finished = true;
                        }
                    } else {
                        // 上拉加载
                        this.list = [...this.list, ...res.data.records];
                        this.loading = false;   // 加载状态结束
                        if (this.list.length == res.data.total || res.data.records.length === 0) {
                            this.finished = true;
                        }
                        this.loading = false
                    }
                }).catch((err) => {
                    console.log("err", err);
                    this.$toast(err.message)
                    this.loading = false
                });
            },
            loadMore() {
                // 异步更新数据
                console.log("加载数据");
                if (this.refreshing) {
                    this.current = 1
                } else {
                    this.current++
                    this.getList();
                }
            },
            onRefresh() {
                this.refreshing = true
                this.finished = false
                this.current = 1
                this.getList()
            },
            tabChange(index) {
                console.log("tab下标", index, this.active);
                this.current = 1
                this.list = []
                this.loadData = true
                this.loading = false
                this.finished = false
                this.refreshing = false
                this.getList()
            }
        },
        computed: {},
        watch: {},
        created() { },
        mounted() {
            this.getList()
        },
    }
</script>
    
<style scoped lang='scss'>
    #team {
        ::v-deep .van-tab__text {
            font-size: 16px;
        }
        ::v-deep .van-tabs__line {
            width: 24px;
        }
        ::v-deep .van-tabs__wrap {
            height: 42px !important;
            margin-bottom: 10px;
            border-top: 1px solid #e5e6eb;
        }
        .list {
            min-height: 80vh;

            .list-item {
                background: #ffffff;
                padding: 16px;
                box-sizing: border-box;
                border-bottom: 1px solid #e5e6eb;
                display: flex;
                justify-content: space-between;
                .avatar {
                    font-size: 0;
                    margin-right: 16px;
                    & > img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                    }
                }
                .middle {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 12px;

                    .top {
                        display: flex;
                        align-items: center;
                    }
                    .omit {
                        display: flex;
                        // 超出一行省略号
                        overflow: hidden;
                        -webkit-line-clamp: 1;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        margin-right: 6px;
                    }
                    .top div {
                        margin-right: 8px;
                    }
                    .name {
                        font-size: 16px;
                        color: #1d2129;
                        line-height: 16px;
                    }
                    .flag {
                        padding: 2px 4px;
                        font-weight: 400;
                        font-size: 10px;
                        line-height: 14px;
                        border-radius: 2px;
                        display: flex;
                        align-content: center;
                        justify-content: center;
                    }
                    .grey {
                        background: #f2f3f5;
                        color: #4e5969;
                    }
                    .blue {
                        color: #165dff;
                        background: #e8f3ff;
                    }
                    .orange {
                        color: #ff7d00;
                        background: #fff7e8;
                    }
                    .red {
                        color: #f53f3f;
                        background: #ffece8;
                    }

                    .add {
                        margin: 8px 0;
                        color: #3d3d3d;
                    }
                    .time {
                        color: #86909c;
                    }
                }
                .middle-view {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                .icon {
                    align-self: center;
                    font-size: 0;
                    & > img {
                        width: 24px;
                        height: 24px;
                        margin-left: 10px;
                    }
                }
            }
        }
        .load {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 90vh;
        }
        .van-empty {
            padding: 60px 0;
        }
    }
</style>